<template>
	<!-- 会员申请 -->
	<view class="real_name ">
		<!-- <view class="f1 c1 fwb">
			请完善您的个人信息
		</view> -->
		<view class="bg">
			<view class="group">
				<view class="lab">
					商家名称
				</view>
				<view class="inp_box" v-if="Index == 1">
					<input type="text" v-model="reqData.ShopName" placeholder-class="placeholderStyle " disabled>
				</view>
				<view v-else class="inp_box">
					<input type="text" v-model="reqData.ShopName" placeholder-class="NameStyle " placeholder="请填写名称">
				</view>
			</view>
			<view class="group">
				<view class="lab">
					地址
				</view>
				<view v-if="Index == 1" class="inp_box">
					<input type="text" v-model="reqData.Address" placeholder-class="placeholderStyle " disabled>
				</view>
				<view v-else class="inp_box" @click="openMap">
					<input type="text" v-model="reqData.Address" placeholder-class="placeholderStyle " placeholder="请选择地址" disabled>
				</view>
				<view v-if="Index != 1" class="icon_box">
					<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
				</view>
			</view>
			<view class="group" @click="showmotion = true">
				<view class="lab">经营项目</view>
				<view class="inp_box">
					<input type="text" :value="reqData.ShopType" disabled placeholder="请选择" />
				</view>
				<view class="icon_box">
					<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
				</view>
			</view>
            <view class="group">
				<view class="lab">
					联系电话
				</view>
				<view class="inp_box">
					<input type="text" v-model="reqData.ServerPhone" placeholder-class="placeholderStyle " placeholder="请填写联系电话" maxlength="11">
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="s_btn" open-type="getPhoneNumber" @getphonenumber="getNums">
					绑定手机
				</button>
				<!-- #endif -->
			</view>
			<view class=" group_textarea">
				<view class="title">门店介绍</view>
				
				<textarea  style="width: 100%;height: 58%;font-weight: 400;" 
						:value="reqData.Description" placeholder="请填写门店介绍" placeholder-class="remtext" maxlength="200" @input="inputrem" />
				<view  class="count">{{ reqData.Description.length }} / {{ maxCount }}</view>
			</view>
		</view>
		<!-- 图片九宫格 -->
		<view class="img_list">
				<view class="title">室内环境(不少于3张)</view>
				<view class="img_box">
					<view class="img" v-for="(item, i) in imgArr" :key="i">
						<image :src="item.tempUrl" mode="aspectFill"></image>
						<view class="icon" @click.stop="delImg(i)">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode=""></image>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="img addimg" @tap="upload" v-if="imgArr.length < 9">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length < 9">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
					</view>
					<!-- #endif -->
				</view>
			</view>
		<!-- <view class="contentbox">
			<view class="f1 text ">请上传营业执照</view>
			<view class="idcard" @click="chooseimg1">
				<block v-if="reqData.isIDCardImg_1">
					<image  :src="reqData.IDCardImg_1" mode="aspectFill" />
				</block>
				<block v-else>
					<view class="icons">
						<image :src="ossPath+'/upload/1715653056214485.png'" mode="" />
					</view>
					<view class="tip">点击上传营业执照</view>
				</block>
				
			</view>
		</view> -->
		<view class="divbox">
			<view class="btnbox">
				<view v-if="Index == 1" class="authenbtn" @click="modifysub">门店修改</view>
				<view v-else class="authenbtn" @click="sub">申请认证</view>
			</view>
		</view>
		
		<!-- 运动项目 -->
			<u-picker :show="showmotion" immediateChange @confirm="setmotion" @cancel="showmotion = false" :columns="motiontype"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ID:'',
				editorContent:'',
				BarTitle:'',
				Index:0,
				reqData: {
					ShopName: "",//名字
					Description:'', //门店介绍
                    ServerPhone:"",//电话
					Address:'',//地址
					ShopImgs:[], //室内环境照片
					Latitude:'',
					Longitude:'',
					ShopType:'', // 类型
					Province:'',//省份
					City:''//城市
				},
				ossPath:null,
				maxCount:200,
				imgArr:[],
				//运动项目
				motiontype:[],
				showmotion:false,
			}
		},
		async onLoad(e) {
			if(e.index == 1){
				this.BarTitle = '管理门店'
				this.Index = 1
				this.getshop()
			}else{
				this.BarTitle = '商家入驻'
			}
			uni.setNavigationBarTitle({
				title: this.BarTitle,
				success: function () {
				},
				fail: function (err) {
				}
			});
			let user = uni.getStorageSync('user');
			this.reqData.ServerPhone = user.Phone
			//this.reqData.ID = user.UserID;
			let dic = await this.$api.post('Catalog/GetDictionary', {
				Type: 'SportType'
			});
			if(dic.code == 0){
				let list = []
				for(let i =0;i<dic.data.length;i++){
					list.push(dic.data[i].Code)
				}
				this.motiontype.push(list)
				console.log(this.motiontype);
			}
			
		},
		onShow(){
			this.ossPath = this.$ossPath
		},
		methods: {
			getNums(e) {
				let _this = this;

				uni.login({
					provider: 'weixin',
					success: async res => {
						let d = {
							encryptedData: e.detail.encryptedData,
							code: res.code,
							aesIv: e.detail.iv
						}
						let res3 = await _this.$api.post('User/GetPhoneNumber', d);

						_this.reqData.ServerPhone = res3.data;

					},
					fail: err => {
						uni.showModal({
							content: '获取失败',
							showCancel: false
						});
					}
				});

			},

			//门店数据
			async getshop(){
				let res = await this.$api.post('Shops/MyShop')
				if(res.code == 0){
					if(res.data){
						this.reqData.ShopName = res.data.ShopName
						this.reqData.Address = res.data.Address
						this.reqData.ShopType = res.data.ShopType
						this.reqData.ServerPhone = res.data.ServerPhone
						this.reqData.City = res.data.City
						this.reqData.Latitude = res.data.Latitude
						this.reqData.Longitude = res.data.Longitude
						this.reqData.Province = res.data.Province
						this.ID = res.data.ID
					}
				}
			},
			setmotion(e){
				this.reqData.ShopType = e.value[0];
				this.showmotion= false;
			},
			//选择地址
		openMap(item) {
			const _this = this
			 	uni.chooseLocation({
					async success(res) {
						// console.log('res-------',res);
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d);
						_this.reqData.Latitude = res.latitude
						_this.reqData.Longitude = res.longitude
						_this.reqData.Address = res.name || d.result.address_reference.landmark_l2.title
						// _this.ShopName = res.name || d.result.address_reference.landmark_l2.title
						_this.reqData.Province = d.result.address_component.province
						_this.reqData.City = d.result.address_component.city
					}
				});
		},
			inputrem(e){
				// console.log(e);
				const {value,cursor} = e.detail
				let str = this.$util.entitiesToUtf16(value) 
				if (str.length>200) {
					this.reqData.Remark = str.slice(0,200)
				}else{
					this.reqData.Description = str
				}
			},
			async sub() {
				if (this.reqData.ShopName == "") {
					this.$pv.msg('请填写姓名');
					return;
				}
				if (this.reqData.Address == "") {
					this.$pv.msg('请填写地址');
					return;
				}
				if (this.reqData.ShopType == "") {
					this.$pv.msg('请选择经营项目');
					return;
				}
                if (this.reqData.ServerPhone == "") {
					this.$pv.msg('请填写电话');
					return;
				}
				if (this.reqData.ServerPhone.length != 11 && !Number(this.reqData.ServerPhone)) {
					this.$pv.msg('请填写正确的电话');
					return;
				}
                if(this.reqData.Description == ''){
					this.$pv.msg('请填写介绍');
					return;
				}
				if(this.reqData.ShopImgs.length<3){
					this.$pv.msg('请至少上传三张图片');
					return;
				}
				console.log(this.reqData,'reqdata');
				let data = JSON.parse(JSON.stringify(this.reqData))
				data.ShopImgs = data.ShopImgs.join(',')
				data.Description = this.$util.utf16ToEntities(data.Description).slice(0,200)
				console.log(data);
				let res = await this.$api.post('Shops/AddShop',data)
				if(res.code == 0){
					this.redirect_to('/pages/user/real_result')
				}

			},
			//修改门店
			async modifysub(){
				if (this.reqData.ShopName == "") {
					this.$pv.msg('请填写姓名');
					return;
				}
				if (this.reqData.Address == "") {
					this.$pv.msg('请填写地址');
					return;
				}
                if (this.reqData.ServerPhone == "") {
					this.$pv.msg('请填写电话');
					return;
				}
				if (this.reqData.ServerPhone.length != 11 && !Number(this.reqData.ServerPhone)) {
					this.$pv.msg('请填写正确的电话');
					return;
				}
                if(this.reqData.Description == ''){
					this.$pv.msg('请填写介绍');
					return;
				}
				if(this.imgArr.length<3){
					this.$pv.msg('请至少上传三张图片');
					return;
				}
				console.log(this.reqData,'reqdata');
				let data = JSON.parse(JSON.stringify(this.reqData))
				data.ShopImgs = data.ShopImgs.join(',')
				console.log(data);
				let res = await this.$api.post('Shops/Edit',{
					ID:this.ID,
					...data
				})
				if(res.code == 0){
					this.$pv.msg('修改成功');
					setTimeout(()=>{
						this.back_to()
					},500)
					
				}
			},
		// 文件上传
		async uploading(url, tempKey) {
			const r = await this.$upload(url, (pro) => {
				this.imgArr.forEach((item) => {
					if (item.tempKey == tempKey) {
						item.pro = pro;
					}
				});
			});
			this.imgArr.forEach((item) => {
				if (item.tempKey == tempKey) {
					item.netPath = r;
				}
			});
			console.log(r,'r');
			this.reqData.ShopImgs.push(r)
		},
		upload() {
			let _this = this;
			uni.chooseMedia({
				count: 9-_this.imgArr.length,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
					res.tempFiles.forEach(async (item) => {
						let o = {
							duration: 0,
							fileType: item.fileType,
							tempUrl: item.tempFilePath,
							flieUrl: item.tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0,
						};

						_this.imgArr.push(o);

						let rex = await _this.uploading(o.flieUrl, o.tempKey);
					});
				},
			});
		},
		selectImg_APP() {
			let _this = this;
			uni.showActionSheet({
				itemList: ['选择照片', '取消'],
				success: function (res) {
					if (res.tapIndex == 0) {
						let ind = 1;
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 9,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ['original', 'compressed'],
							sourceType: ['album'],
							success(res) {
								console.log(res);
								res.tempFiles.forEach(async (item) => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0,
									};

									_this.imgArr.push(o);

									let rex = await _this.uploading(o.flieUrl, o.tempKey);
								});
							},
						});
						return;
					}
				},
				fail: function (res) {},
			});
		},
		delImg(i) {
			this.imgArr.splice(i, 1);
			this.reqData.ShopImgs.splice(i,1)
			// this.formdata.Images.splice(i, 1);
		},
			async chooseimg1(e) {
				try {
			
					let _this = this;
					uni.chooseMedia({
						count: 1, //默认9
						mediaType: ['image'],
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: async function(res) {
							console.log(res, "------look")
							let r = await _this.uploading(res.tempFiles[0].tempFilePath);
							
							console.log(r);
							
							_this.reqData.IDCardImg_1 = r;
							_this.reqData.isIDCardImg_1=true;
						}
					})
				} catch (error) {
					this.$pv.msg('图片上传失败');
				}
			},
			async chooseimg2(e) {
				try {

					let _this = this;
					uni.chooseMedia({
						count: 1, //默认9
						mediaType: ['image'],
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: async function(res) {
							console.log(res, "------look")
							let r = await _this.uploading(res.tempFiles[0].tempFilePath);
							_this.reqData.IDCardImg_2 = r;
							_this.reqData.isIDCardImg_2=true;
						}
					})
				} catch (error) {
					this.$pv.msg('图片上传失败');
				}
			},
			// async uploading(url, tempKey) {
			// 	let _this = this;
			// 	let r = await this.$api.upload(
			// 		'/Community/Upload', {
			// 			path: url
			// 		},
			// 		pro => {
			// 			if (pro != 100) {
			// 				_this.$pv.load('已上传' + pro + '%');
			// 			} else {
			// 				setTimeout(() => {
			// 					_this.$pv.closeLoad();
			// 				}, 300);
			// 			}
			// 		}
			// 	);
			// 	return r
			// }
		},
	}
</script>

<style lang="scss">
page{
	background-color: #F6F6F6;
}
	.real_name {
		// padding-top: 40rpx;
		// padding-bottom: 50rpx;
		box-sizing: border-box;
	}
.s_btn {
	color: #fff;
	font-size: 24rpx;
	width: 124rpx !important;
	height: 60rpx !important;
	border-radius: 5rpx;
	background-color: #706EEE;
	margin: 0 0 0 20rpx;
}
.img_list {
		padding-top: 30rpx;
		border-top: 1rpx solid #E4E4E4;
		box-sizing: border-box;
		padding-bottom: 30rpx;
    	padding-left: 34rpx;
    	box-sizing: border-box;
		background-color: #fff;
		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
		image {
			width: 100%;
			height: 100%;
		}
		.img_box {
			display: flex;
			align-items: center;
			// justify-content: space-evenly;
			flex-wrap: wrap;
		}
		.videobox {
			padding: 32rpx;
			position: relative;
			> view {
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx;
				overflow: hidden;
				video {
					width: 100%;
					height: 100%;
				}
			}
			.icon {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image {
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			margin-top: 16rpx;
			// overflow: hidden;
			position: relative;
			image {
				border-radius: 8rpx;
			}
			.icon {
				position: absolute;
				right: -20rpx;
				top: -14rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image {
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img:nth-child(3n) {
			margin-right: 0;
		}
		.addimg {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F6F6F6;
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
.group_textarea {
	height: 270rpx;
	margin-top: 30rpx;
	// background-color: #fff;
	// padding-left: 32rpx;
    box-sizing: border-box;
	position: relative;
	padding: 0 34rpx;
	box-sizing: border-box;
	.edibox{
		.myEdit {
			height: calc(270rpx - 100rpx);
			margin-bottom: 30rpx;
		}
		.ql-container{
			min-height: 150rpx !important;
		}
	}
	.title{
		color: #333333;
		font-weight: 500;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	.count{
		position: absolute;
		bottom: 20rpx;
		right: 33rpx;
		font-size: 28rpx;
		color: #C2C2C2;
	}
	/deep/ .u-textarea {
		background: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-bottom: none !important;
		padding: 0 !important;
		height: 100% !important;
	}

	/deep/ .u-textarea__count {
		background: none !important;
		color: #0d0d0d !important;
	}

	/deep/ .u-textarea__field {
		color: #0d0d0d !important;
		font-size: 28rpx !important; 
		height: 100% !important;
	}
}
	.group {
		display: flex;
		align-items: center;
		height: 90rpx;
		border-bottom: 1px solid #E4E4E4;
		margin: 16rpx 32rpx 16rpx 34rpx;

		&:last-child {
			border-bottom: none;
		}

		.lab {
			padding-right: 10rpx;
			color: #333333;
			font-size: 32rpx;
		}

		.inp_box {
			flex: 1;

			input {
				width: 100%;
				text-align: right;
			}
			.NameStyle{
				color: #999999;
				font-size: 32rpx;
				// margin-right: 20rpx;
				padding-right: 32rpx;
				box-sizing: border-box;
			}
			.placeholderStyle{
				color: #999999;
				font-size: 32rpx;
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}
	}
	.text{
		color: #333333;
		font-size: 32rpx;
		background-color: #fff;
		margin-left: 34rpx;
	}
	.bg {
		// margin-top: 30rpx;
		// border-radius: 16rpx;
		background: #fff;
	}

	.mt40 {
		margin-top: 40rpx;
	}
	.contentbox{
		background-color: #fff;
		padding: 32rpx 0;
		box-sizing: border-box;
		.title{
			font-size: 24rpx;
			color: #999999;
			margin-left: 64rpx;
		}
	}
	.idcard {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 32rpx auto;
		width:500rpx;
		height: 350rpx;
		// background: #202020;
		background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17156568112751372.png');
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 16px;
		background-color: #fff;

		image{
			width:100%;
			height:100%
		}
		.icons {
			// background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			height: 120rpx;
			width: 120rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				height: 120rpx;
				width: 120rpx;
			}
		}

		.tip {
			font-size: 24rpx;
			color: #999999;
			margin-top: 22rpx;
		}
	}
	.idcard2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 40rpx auto;
		width:500rpx;
		height: 350rpx;
		// background: #202020;
		background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711437129613792.png');
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 16px;

		image{
			width:100%;
			height:100%
		}
		.icons {
			// background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			height: 120rpx;
			width: 120rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				height: 120rpx;
				width: 120rpx;
			}
		}

		.tip {
			font-size: 24rpx;
			color: #999999;
			margin-top: 22rpx;
		}
	}

	.m40 {
		margin-top: 40rpx;
	}
	.divbox{
		width: 100%;
		height: 196rpx;
		position: relative;
	}
	.btnbox{
		width: 100%;
		height: 196rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		.authenbtn{
			width: 670rpx;
			height: 88rpx;
			border-radius: 44rpx;
			background-color: #706EEE;
			text-align: center;
			line-height: 88rpx;
			margin-left: 38rpx;
			margin-top: 20rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>